<div class="row clearfix" [@routerTransition]>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="card main-content">
      <div class="header">
        <h2>{{ "Tenants" | localize }}</h2>
        <ul class="header-dropdown m-r--5">
          <li>
            <button
              mat-icon-button
              [matMenuTriggerFor]="headerMenu"
              class="header-dropdown-mat-icon-button"
            >
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #headerMenu="matMenu">
              <button mat-menu-item (click)="refresh()">
                <mat-icon>refresh</mat-icon>
                <span>{{ "Refresh" | localize }}</span>
              </button>
            </mat-menu>
          </li>
        </ul>
      </div>
      <div class="body table-responsive">
         <!--query start-->
         <div class="row clearfix">
             <form>
                 <div class="row">
                     <div class="col-md-6">
                         <mat-form-field>
                             <input matInput [placeholder]="l('Filter')" [(ngModel)]="keyword" name="keyword">
                         </mat-form-field>
                     </div>
                     <div class="col-md-6">
                         <mat-form-field>
                             <mat-select [placeholder]="l('IsActive')" [(ngModel)]="isActive" name="isActive">
                                 <mat-option value="">{{ 'All' | localize }}</mat-option>
                                 <mat-option value="true">{{ 'Yes' | localize }}</mat-option>
                                 <mat-option value="false">{{ 'No' | localize }}</mat-option>
                             </mat-select>
                         </mat-form-field>
                     </div>
                     <div class="col-md-12 text-right p-r-25">
                         <button mat-raised-button color="primary" (click)="getDataPage(1)">{{ 'Search' | localize }}</button>
                     </div>
                 </div>
             </form>
          </div>
          <!--query end-->
        <table class="table table-hover table-striped" [busy]="isTableLoading">
          <thead>
            <tr>
              <th>{{ "TenancyName" | localize }}</th>
              <th>{{ "Name" | localize }}</th>
              <th>
                <div style="text-align:center">{{ "IsActive" | localize }}</div>
              </th>
              <th>{{ "Actions" | localize }}</th>
            </tr>
          </thead>
          <tbody>
            <tr
              *ngFor="
                let tenant of (tenants
                  | paginate
                    : {
                        id: 'server',
                        itemsPerPage: pageSize,
                        currentPage: pageNumber,
                        totalItems: totalItems
                      })
              "
            >
              <td>{{ tenant.tenancyName }}</td>
              <td>{{ tenant.name }}</td>
              <td align="center">
                <i
                  class="material-icons check_box"
                  *ngIf="tenant.isActive"
                >
                  check_box
                </i>
                <i
                  class="material-icons indeterminate_check_box"
                  *ngIf="!tenant.isActive"
                >
                  indeterminate_check_box
                </i>
              </td>
              <td>
                <button class="action-button" mat-icon-button [matMenuTriggerFor]="actionsMenu">
                  <mat-icon>menu</mat-icon>
                </button>
                <mat-menu #actionsMenu="matMenu">
                  <button mat-menu-item (click)="editTenant(tenant)">
                    <mat-icon>edit</mat-icon>
                    <span>{{ "Edit" | localize }}</span>
                  </button>
                  <button mat-menu-item (click)="delete(tenant)">
                    <mat-icon>delete</mat-icon>
                    <span>{{ "Delete" | localize }}</span>
                  </button>
                </mat-menu>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="abp-pagination-controls-wrapper"
          *ngIf="totalItems > pageSize"
        >
          <abp-pagination-controls
            (pageChange)="getDataPage($event)"
            id="server"
          >
          </abp-pagination-controls>
        </div>
        <button
          mat-mini-fab
          color="primary"
          class="pull-right"
          (click)="createTenant()"
        >
          <mat-icon>add</mat-icon>
        </button>
      </div>
    </div>
  </div>
</div>
